<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title>鼠标添加js遮罩层</title>
<style>
    *{
        box-sizing: border-box;
    }
    body{
        background-color: lightgray;
     }
    header{
       text-align: center;
       margin: 0;
       padding: 0;
       display: flex;
       justify-content: center;
       position: relative;
    }
    #border{
        margin:0;
        padding: 0;
        width: 460px;
        height: 560px;
        text-align: center;
        border: 8px solid orange; 
        position: absolute;
        display: none;
        z-index: 1000;
    }
    #outer{
        /*margin: 0px 10px;*/
        width: 440px;
        height: 550px;
        text-align: center;
        background-color: #fff;
        position:absolute;
        margin: 0;
        z-index: 10;
        /*margin-top: 10px;*/
    }
    #a1{
        width: 420px;
        height: 550px;
        text-align: center;
        position: absolute;
      }
    #img1{
        width: 420px;
        height:430px;
        margin: 0px 10px;
    }
    #a1>p{
        line-height: 20px;
        font-family: '楷体';
    }
    #tab{
        width: 440px;
        height: 210px;
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        text-align: center;
        margin-top: 570px;
        position: relative;
    }
    #a2,#a3{
       width: 196px;
       height: 182px;
       margin: 10px 20px;
       line-height: 20px;
       margin-top: 10px;
       background-color: #666;
    }
    .b1{
        position: absolute;
        width: 200px;
        /*display: none;*/
        
    }
     .p1{
         display: none;
         font-family: '楷体';
         color: wheat;
         position: relative;
         margin-top: -150px;
         /*margin-left: -170px;*/
         text-align: left;
         left: -180px;

     }
</style>
</head>
<body>
<header>
<div id="border">
 </div>
  <section id="outer">
       <div id="a1"><img id="img1" src="img/01.png" alt=""><p>【金熹】设计上运用了多片层叠设计,形成了立体倒放的花苞<br>视觉效果
           ,创意独特。浓烈的印花明快的色彩勾勒出美妙的<br>夏日异国情调,优质雪纺面料让小衫更显质感穿着凉爽透气,<br>做工也相当考究。</p></div>
  </section>
 <section id="tab">
     <div id="a2"><img id="img2" src="img/02.png" alt=""><p class="p1">special品牌旗舰店<br><br>最具传奇浪漫色彩的欧洲<br>经典设计,给你带来专属<br>的美丽。</p></div>
     <div id="a3"><img id="img3" src="img/03.png" alt=""><p class="p1">sophy橡菲旗舰店<br><br>新款韩版微笑性感红唇上<br>衣圆领女短袖修身T恤。</p></div>
</section>
</header>    
</body>
<html>
<script>
    
    var outer = $('#outer');
    var p = $('.p1');
    var div = $('#a1');
    var p1= $('.p1')
// 为outer设置鼠标进入和移出事件
    $('#outer').hover(function(){
        console.log('l')
        $('#border').fadeIn({
            opacity:1,
        },1000)
    },function(){
        $('#border').fadeOut({
            opacity:0.5,
        },1000)
    });
// 为a2，a3设置鼠标悬浮事件  
   $('#a2').hover(function(){
          $('#a2 p').show();
          $('#a2 p').animate({
             'left':'0px',
             'top':'0px'
          });
          $('#a2 img').css('opacity','0.1');
      },function(){
          $('#a2 p').hide();
          $('#a2 p').animate({
            'left':'-180px'
          });
            $('#a2 img').css('opacity','0.7');   
          });
   $('#a3').hover(function(){
          $('#a3 p').show();
          $('#a3 p').animate({
            'left':'0px',
            'top':'0px'
          });
          $('#a3 img').css('opacity','0.1');
      },function(){
          $('#a3 p').hide();
          $('#a3 p').animate({
              'left':'-180px'
          });
          $('#a3 img').css('opacity','0.7');
      });
</script>